<template>

    <!--结算键盘-->
    <div>
        <el-dialog align-center class="pay-keyboard-dialog" width="1000px" v-model="visible" :title="title" @opened="dialogOpened" :isDisabled="isDisabled">
            <slot name="top"></slot>

            <div class="flex">
                <div class="left">
                <slot name="left">
                    
                </slot>
            </div> 
                <div id="pay-keyboard" :class="keyboardContainerClass">

                </div>
            </div>
           <slot name="bottom">
            
           </slot>
            <!-- <template #footer>
                <el-button size="large" type="warning">重盘</el-button>
                <el-button size="large" type="success">盘平</el-button>
                <el-button size="large" type="primary">保存</el-button>
            </template> -->
        </el-dialog>

    </div>


</template>
<script setup lang='ts'>
// @ts-nocheck
import { ref, watch, nextTick, onBeforeUnmount } from 'vue'

import Keyboard from 'simple-keyboard'
import 'simple-keyboard/build/css/index.css'
import { ElMessage } from 'element-plus'

const props = withDefaults(defineProps<{ modelValue: boolean, title?: string, keyboardContainerClass: string, defaultValue?: string,layout?:Array<any>,isDisabled?:boolean }>(), {
    title: '订单结算', defaultValue: '',
    layout:[
        '1 2 3 200',
        '4 5 6 100',
        '7 8 9 50',
        '. 0 {bksp} 30',
    ],
    isDisabled:false //键盘是否可用，默认为可用
})

const emit = defineEmits(['onChange', 'onKeyPress', 'update:modelValue', 'onSubmit','dialogOpened'])
const visible = ref(props.modelValue)
let keyboard: any = null


function setKeyboardInput(val) {
    keyboard && keyboard.setInput(val)
}
defineExpose({ setKeyboardInput })

function dialogOpened() { //Dialog 打开动画结束时的回调
    //console.log('oepn~')
    initKeyboard()
    //设置初始值
    keyboard && keyboard.setInput(props.defaultValue)
    emit('dialogOpened')
}
watch(() => props.modelValue, (newVal) => {
    visible.value = newVal
    if (!newVal && keyboard) {
        keyboard.clearInput()

        if (keyboard) {
            keyboard.destroy();
            keyboard = null
           // console.log(keyboard)

        }
    }

})
watch(() => visible.value, (newVal) => {
    emit('update:modelValue', newVal)
})


const onKeyPress = (button) => {
    if(props.isDisabled){
        ElMessage({
            message:'请选择支付方式',
            type:'error'
        })
        return false
    }
 
    let input = keyboard.getInput()
   // console.log(input)
    // if (button === '{bksp}') { //回退 不需要单独设置keyboard 的input值  会自动执行onChange 方法
    //     // const currentInput = input;
    //     // console.log(currentInput)
    //     // keyboard.setInput((currentInput + '').slice(0, -1))
    //     // console.log((currentInput + '').slice(0, -1))
    //     console.log(keyboard.getInput())
    // }
    if (button === '{clear}') {//清空
        keyboard.setInput('')
    }
    if (button === '{confirm}') {//确认
        emit('update:modelValue', false)
    }
    emit('onKeyPress', button)
}
const onChange = (input) => {
    if(props.isDisabled){

        return false
    }
   // console.log('onchange~', input)
    let filterInput
    if (input.includes('.')) {
        // 确保只有一个小数点
        filterInput = input.split('.')[0] + '.' + input.split('.')[1]
        
    }else{
        
        //以0开头并且超过两位 而且不包含小数点，则去掉首位0
        // if(input.length>=2&&input.startsWith('0')){
        //     filterInput = input.slice(1)
        // }else{
            filterInput = input
        //}

        
    }

    keyboard.setInput(filterInput)
    emit('onChange', filterInput)

}


//组件解绑之前 销毁keyboard实例，避免内存泄漏
onBeforeUnmount(() => {
    // console.log('onBeforeUnmount')
    if (keyboard) {
        keyboard.destroy();
        keyboard = null
    }
})

//初始化keyboard
function initKeyboard() {

    // let defaultLayout = [
    //     '1 2 3 200',
    //     '4 5 6 100',
    //     '7 8 9 50',
    //     '. 0 {bksp} 30',
    // ]
    let defaultLayout = props.layout
    // console.log(defaultLayout)
    const options = {
        onChange,
        onKeyPress,
        layout: {
            default: defaultLayout,
        },
        display: {
             '{bksp}': "⌫",
            '{clear}': '清空',
            '{confirm}': '完成',
            

        },


    }

    keyboard = new Keyboard(`${props.keyboardContainerClass}`, options)
}





</script>

<style lang='scss' scoped>
:deep(.pay-keyboard-dialog) {
    // position: absolute !important;
    // // right: 13px !important;
    // top: 20px;
    // margin: 0 !important;
    // --el-dialog-width: calc(70% - 25px);
}

#pay-keyboard {
    :deep(.hg-button-bksp) {
        width: 20px;
        font-weight: bold !important;
        line-height: 1;
        // font-size: 18px!important;
        // color: #fff;
        // background-color: var(--el-color-danger);
    }

    :deep(.hg-button-cp) {
        width: 20px;
        font-weight: bold !important;
        color: #fff;
        background-color: var(--el-color-warning);
    }

    :deep(.hg-button-pp) {
        width: 20px;
        font-weight: bold !important;
        color: #fff;
        background-color: var(--el-color-success);
    }

    :deep(.hg-button-bc) {
        width: 20px;
        font-weight: bold !important;
        color: #fff;
        background-color: var(--el-color-primary);
    }

    :deep(.hg-rows) {
        height: 100%;

        .hg-row {
            box-sizing: border-box;
        }
    }

    :deep(.hg-button-confirm) {
        min-width: 30%;

        font-weight: bold !important;
        color: #fff;
        background-color: var(--el-color-primary);
    }

    :deep(.hg-button) {
        padding: 25px 5px;
        font-size: 20px;
        height: 100%;
        box-sizing: border-box;
        line-height: 1;
    }
    :deep(.hg-button[data-skbtnuid="default-r0b3"]){
        font-weight: bold;
    }
    :deep(.hg-button[data-skbtnuid="default-r1b3"]){
        font-weight: bold;
    }
    :deep(.hg-button[data-skbtnuid="default-r2b3"]){
        font-weight: bold;
    }
    :deep(.hg-button[data-skbtnuid="default-r3b3"]){
        font-weight: bold;
    }
}

.flex {
    display: flex;

    &>div {
        flex: 1;
        &.left{
            width: 50%;
        }
    }

}

.pay_input{
    :deep(>input)
    {
      
        background-color: red!important;
   
    }
}
</style>
